<template>
	<view class="physician-detail">
		<view class="topCon">
			<u-navbar title="机构详情" bgColor='transparent' :placeholder='true' :autoBack="true">
				<view class="u-nav-slot" slot="right">
					<u-icon name="heart-fill" color="red" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="customContent" :style="{top: isH5 ? '140rpx' : `${74 + statusBarHeight}px`}">
			<view class="top-main">
				<view class="left">
					<image src="/static/images/doctor-logo.png"></image>
					<text>距您1.5km</text>
				</view>
				<view class="right">
					<view class="main">
						<view class="left">
							<view class="name">
								东莞理疗中心
								<image src="/static/images/doctor-individual.png"></image>
							</view>
							<view class="number">KJHG4654654</view>
							<view class="tag">
								<view>东莞</view>
								<view>二甲</view>
								<view class="star">
									<u-icon name="star" color="#ff8c40" size="20"></u-icon>
									4.5
								</view>
							</view>
						</view>
						<view class="right" @tap="goto('pages/public/personalCode')">
							<image src="/static/images/doctor-code.png"></image>
						</view>
					</view>
					<view class="bottom">
						<text class="textWrap addressCon">广东省东莞市东城街道君豪商业中心1001广东省东莞市东城街道君豪商业中心1001</text>
						<image src="/static/images/fj.png"></image>
					</view>
				</view>
			</view>
			<view class="main-content">
				<view class="nav-list">
					<view class="item" :class="{active:item===nav_list_active}" v-for="(item,index) in nav_list"
						:key="index" @click="nav_list_active=item">
						{{item}}
					</view>
					<!-- <view class="item">用户评价</view> -->
				</view>
				<view class="nav-content">
					<view v-if="'个人简介'===nav_list_active">
						<!-- 个人简介 -->
						<view class="introduction">
							<u-read-more :toggle="true" showHeight="132" :shadowStyle="{backgroundImage: 'none'}"
								closeText="查看更多" color='rgba(152, 160, 166, 1)'>
								<rich-text :nodes="introduction"></rich-text>
							</u-read-more>
						</view>
						<view class="advantage">
							<view class="title">优势</view>
							<view class="content">
								<rich-text :nodes="advantage"></rich-text>
							</view>
						</view>
						<view class="service">
							<view class="title">服务</view>
							<scroll-view scroll-x="true" class="scrollCon">
								<view class="service-nav">
									<view class="item" :class="typeIndex==index?'active':''" @tap="typeIndex=index"
										v-for="(item,index) in typeList" :key="index">
										<text>{{item.lable}}</text>
									</view>
								</view>
							</scroll-view>
							<view class="content-list" v-if="typeIndex==0">
								<view class="tabCon">
									<u-tabs :list="tabList" lineWidth='26' lineColor='#44D4A8' :activeStyle="{
										fontWeight: 'bold',
										transform: 'scale(1.05)',
										marginRight:'22rpx'
									}"></u-tabs>
								</view>
								<view class="item" @tap="goto('pages/order/orderConfirm')">
									<view class="item-left">
										<image src="/static/images/serve-default.png"></image>
									</view>
									<view class="item-right">
										<view class="item-title">60分钟肩颈疏通+艾灸</view>
										<view class="item-order">
											<view>60分钟</view>
											<view>医师</view>
										</view>
										<view class="item-price">
											<text>￥</text>288
										</view>
										<view class="item-button">预约</view>
									</view>
								</view>
								<view class="item">
									<view class="item-left">
										<image src="/static/images/serve-default.png"></image>
									</view>
									<view class="item-right">
										<view class="item-title">60分钟肩颈疏通+艾灸</view>
										<view class="item-order">
											<view>60分钟</view>
											<view>医师</view>
										</view>
										<view class="item-price">
											<text>￥</text>288
										</view>
										<view class="item-button">预约</view>
									</view>
								</view>
							</view>
							<view class="content-list" v-if="typeIndex==1">
								<physicianList :data="physicianList" @appointment="handleClickAppointment"
									@open="handleClickOpen">
								</physicianList>
							</view>
						</view>
					</view>
					<view v-if="'用户评价'===nav_list_active">
						<!-- 用户评价 -->
						<view class="comment">
							<view class="comment-item">
								<view class="nickname-time">
									<view class="left">
										<image src="/static/images/comment-user.png"></image>
										<text>小问号</text>
									</view>
									<view class="right">
										2024-05-25 15:25
									</view>
								</view>
								<view class="star">
									<u-rate :count="5" v-model="rateValue"></u-rate>
								</view>
								<view class="content">
									装修很好，很奈斯，非常喜欢，以后还会推荐给更多朋友！
								</view>
								<view class="avImage">
									<image src="/static/images/zfb.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		data() {
			return {
				tabList: [{
					name: '推拿按摩',
				}, {
					name: '健康讲解',
				}, {
					name: '康复训练'
				}, {
					name: '护理服务'
				}, {
					name: '其它'
				}],
				introduction: "XX市康泽医院是经XX省卫生健康委员会批准设立的三级甲等综合医院，坐落于XX市核心城区（XX区XX路189号），毗邻城市生态公园，环境清幽宜人。医院始建于2008年，历经十余年发展，已成长为集医疗、教学、科研、预防、康复于一体的区域医疗中心，承担着全市及周边地区超300万人口的医疗健康服务任务。",
				advantage: "医院学科设置齐全，现有临床科室32个、医技科室12个，其中心血管内科、神经康复科、微创外科、妇产医学中心为省级重点专科，急诊医学科、重症医学科（ICU）为市级质控中心。",
				nav_list: ["个人简介", "用户评价"],
				nav_list_active: "个人简介",
				rateValue: 3,
				serveType: 0,
				typeIndex: 0,
				typeList: [{
						lable: '上门预约',
					},
					{
						lable: '医师',
					},
					{
						lable: '体检',
					},
					{
						lable: '线下学习',
					}
				],
				physicianList: Array.from({
					length: 20
				}, (_, i) => i + 1).map((item) => {
					return {
						"level": "初级师",
						"name": "艾师傅",
						"star": "4.5",
						"address": "东莞",
						"price": "286.00",
						"image": "/static/images/physician-logo.png",
					}
				}),
			}
		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.physician-detail {
		position: relative;
		height: 100%;
		background-color: rgba(246, 248, 252, 1);

		.topCon {
			position: absolute;
			width: 100%;
			height: 456rpx;
			background: linear-gradient(180deg, rgba(102, 184, 212, 0.2) 0%, rgba(66, 189, 255, 0.2) 100%);

			.nav {
				padding: 88rpx 30rpx 0 32rpx;
				height: 176rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 36rpx;
					font-weight: 400;
					line-height: 52.12rpx;
					color: rgba(51, 51, 51, 1);
				}
			}
		}

		.customContent {
			position: relative;
			z-index: 99;
		}

		.top-main {
			display: flex;
			margin-left: 32rpx;

			>.left {
				width: 128rpx;

				image {
					width: 128rpx;
					height: 128rpx;
				}

				text {
					text-align: center;
					margin-top: 12rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(152, 160, 166, 1);
				}
			}

			>.right {
				flex: 1;

				.main {
					display: flex;
					padding-right: 32rpx;
					justify-content: space-between;

					>.left {
						// flex: 1;
						padding-left: 32rpx;

						.name {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(54, 68, 79, 1);

							image {
								width: 80rpx;
								height: 40rpx;
								margin-left: 8rpx;
							}
						}

						.number {
							margin-top: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(94, 103, 110, 1);
						}

						.tag {
							margin-top: 8rpx;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(94, 103, 110, 1);

							.star {
								display: flex;
								align-items: center;
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(54, 68, 79, 1);
							}

							>view {
								margin-right: 24rpx;
							}
						}
					}

					>.right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}

				.bottom {
					margin-left: 32rpx;
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(96, 98, 113, 1);

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.main-content {
			margin: 32rpx 0;
			padding: 36rpx 24rpx 0;
			background-color: rgba(246, 248, 252, 1);
			border-radius: 32rpx 32rpx 0 0;

			.nav-list {
				display: flex;

				.item {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(152, 160, 166, 1);
					margin-right: 48rpx;
				}

				.item.active {
					color: rgba(54, 68, 79, 1);
				}
			}

			.nav-content {
				margin-top: 24rpx;
				padding-bottom: 24rpx;

				.introduction {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);
				}

				.advantage {
					margin-top: 48rpx;

					.title {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(54, 68, 79, 1);
					}

					.content {
						margin-top: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(94, 103, 110, 1);
					}

				}

				.service {
					>.title {
						margin: 48rpx 0 26rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(54, 68, 79, 1);
					}

					.scrollCon {
						width: 100%;
					}

					.service-nav {
						padding: 12rpx;
						background-color: #FFF;
						border-radius: 24rpx;
						overflow: hidden;
						// display: inline-flex;
						display: flex;
						justify-content: space-between;
						white-space: nowrap;

						.item {
							width: 169.5rpx;
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
						}

						.item.active {
							color: $theme-color;
							border-radius: 16rpx;
							background: rgba(68, 212, 168, 0.08);
						}
					}

					.content-list {
						margin-top: 24rpx;

						>.item {
							display: flex;
							margin: 12rpx 0;
							background-color: #FFF;
							border-radius: 24rpx;
							overflow: hidden;

							.item-left {
								image {
									margin: 16rpx;
									width: 128rpx;
									height: 128rpx;
								}
							}

							.item-right {
								position: relative;
								flex: 1;

								.item-title {
									margin-top: 16rpx;
									font-size: 28rpx;
									font-weight: 500;
									color: rgba(54, 68, 79, 1);
								}

								.item-order {
									margin-top: 8rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: rgba(94, 103, 110, 1);
									display: flex;

									>view {
										margin-right: 24rpx;
									}
								}

								.item-price {
									margin-top: 12rpx;
									font-size: 28rpx;
									font-weight: 500;
									letter-spacing: 0rpx;
									line-height: 37.12rpx;
									color: rgba(255, 140, 64, 1);

									>text {
										font-size: 20rpx;
									}
								}

								.item-button {
									position: absolute;
									right: 16rpx;
									bottom: 16rpx;
									font-size: 28rpx;
									font-weight: 400;
									color: rgba(255, 255, 255, 1);
									width: 112rpx;
									height: 48rpx;
									border-radius: 24rpx;
									background: $theme-color;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
						}
					}
				}

				.comment {
					.comment-item {
						padding: 24rpx;
						background-color: #fff;
						border-radius: 24rpx;

						.nickname-time {
							display: flex;
							justify-content: space-between;

							>.left {
								display: flex;
								align-items: center;

								image {
									width: 48rpx;
									height: 48rpx;
								}

								text {
									margin-left: 16rpx;
									font-size: 28rpx;
									font-weight: 500;
									color: rgba(57, 63, 71, 1);
								}
							}

							>.right {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(117, 120, 128, 1);
							}
						}

						.avImage {
							display: flex;
							flex-wrap: wrap;
							margin-top: 8rpx;

							image {
								margin-right: 20rpx;
								width: 96rpx;
								height: 96rpx;
							}
						}

						.star {
							margin-top: 21rpx;
						}

						.content {
							margin-top: 21rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(117, 120, 128, 1);
						}
					}
				}
			}
		}
	}

	.addressCon {
		width: 458rpx;
		margin-right: 36rpx;
	}
	
	.tabCon{
		margin-bottom: 24rpx;
	}
</style>